<template>
  <div class="bottomDataStyle">
    <div class="bottomTitle">资金债券</div>

    <div class="echartsStyle">
      <echartsLeft></echartsLeft>
      <echartsCenter></echartsCenter>
      <echartsRight></echartsRight>
    </div>
  </div>
</template>

<script lang="ts" setup>
import echartsLeft from './echartsLeft.vue';
import echartsCenter from './echartsCenter.vue';
import echartsRight from './echartsRight.vue';
</script>


<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bottomDataStyle {
  height: 320px;
  margin: 20px 20px 0px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  // border: 1px solid red;
  background-image: url("../../../../assets/lingshui/背景_u24.svg");
  background-size: 100% 100%;
  border-radius: 10px;

  .bottomTitle {
    width: 433px;
    height: 35px;
    // border: 1px solid red;
    background-image: url("../../../../assets/lingshui/标题_u21.svg");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
  }

  .echartsStyle {
    width: 100%;
    height: 260px;
    // border: 1px solid red;
    display: flex;
    justify-content: space-around;
  }
}
</style>